<template>
  <div>
    <nav-bar class="navbar">
      <span slot="left" class="iconfont icon-huitui leftInfo" @click="$router.push('/home')"></span>
      <div slot="center" class="center">注册</div>
    </nav-bar>
    <div class="login">
      <img src="~assets/img/OIP-C.jpg" alt="">
      <div class="login-info">
        <div class="userInfo">
          <input type="text" placeholder="用户名/手机号/邮箱" v-model="username ">
        </div>
        <div class="pawInfo">
          <input type="password" placeholder="密码" v-model="password " ref="inputInfo"> <br>
          <span class="iconfont icon-quxiao pawIcon cancel" v-show="pass" @click="cancelVal"></span>

          <span class="iconfont icon-biyanjing pawIcon" v-if="isShow" @click="changeInfo"></span>
          <span class="iconfont icon-yanjing pawIcon" v-else @click="changeInfo"></span>
        </div>

        <button class="loginBtn" @click="register">注册</button>
      </div>
    </div>

  </div>
</template>
<script>
import navBar from 'components/common/navbar/navBar'
import { handleShow } from 'utils/mixin'
export default {
  name: '',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  components: {
    navBar
  },
  mixins: [handleShow],
  methods: {
    async register() {
      const res = this.$require({
        url: '/user/register',
        method: 'post',
        data: {
          username: this.username,
          passowrd: this.password
        }
      })
      if (res.status == 0) {
        this.$router.push('/login')
      }
    }
  }
}
</script>
<style scoped lang="scss">
.navbar {
  background-color: #f6f6f6;
  height: 44px;
  font-size: 16px;
  font-weight: 500;
}
.leftInfo {
  font-weight: bold;
  font-size: 20px;
  display: block;
}
.login {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
  width: 300px;
  height: 160px;
  border: 2px solid #eee;
  border-radius: 15px;
  img {
    width: 75px;
    height: 75px;
    position: absolute;
    left: 50%;
    top: -35%;
    transform: translateX(-50%);
    border: 2px solid #f6f6f6;
    border-radius: 50%;
  }
  input {
    padding-left: 10px;
    width: 225px;
    height: 25px;
    border-radius: 10px;
    margin-bottom: 5px;
    border: 2px solid #eee;
  }
  .login-info {
    margin-top: 30px;
    padding: 0 20px;
  }
  .pawInfo {
    position: relative;
  }
  .pawIcon {
    position: absolute;
    right: 30px;
    top: 6px;
  }
  .cancel {
    right: 50px;
  }

  .loginBtn {
    position: absolute;
    bottom: 10px;
    outline: none;
    width: 250px;
    height: 30px;
    border-radius: 20px;
    border: 2px solid red;
    background: red;
    color: #fff;
  }
}
</style>
